import { createRouter, createWebHistory } from "vue-router";

//主要界面路由配置
export const mainRoutes = [
  {
    name: "home",
    path: "home",
    component: () => import("@/pages/Home.vue"),
  },
  {
    name: "news",
    path: "news",
    meta: {
      title: "新闻的路由",
      x: 12.5,
      y: 23.09,
      routes: ["home", "news"],
    },
    component: () => import("@/pages/News.vue"),
    children: [
      {
        name: "detail",
        // path: 'detail',
        path: "detail/:id?/:content?/:title?",
        component: () => import("@/pages/Detail.vue"),
        // props: true,
        // props(route) {
        //   return route.query;
        // }
        // props: {
        //   x: 12.5,
        //   y: 23.09
        // }
      },
    ],
  },
  {
    name: "about",
    path: "about",
    component: () => import("@/pages/About.vue"),
  },
  {
    name: "pinia",
    path: "pinia",
    component: () => import("@/pages/Pinia.vue"),
  },
];

//其他路由配置
export const otherRoutes = [
  {
    name: "ts",
    path: "tscomponent",
    component: () => import("components/TsComponent.vue"),
  },
  {
    name: "ref",
    path: "ref",
    component: () => import("components/Ref.vue"),
  },
  {
    name: "lifecyle",
    path: "lifecyle",
    component: () => import("components/LifeCycle.vue"),
  },
  {
    name: "watch",
    path: "watchcomponent",
    component: () => import("components/WatchComponent.vue"),
  },
  {
    name: "user",
    path: "user",
    component: () => import("components/User.vue"),
  },
  {
    name: "car",
    path: "car",
    component: () => import("components/Car.vue"),
  },
  {
    name: "person",
    path: "person",
    component: () => import("components/Person.vue"),
  },
];

//通信路由配置
export const commRoutes = [
  {
    name: "props",
    path: "props",
    meta: {
      title: "props通信",
    },
    component: () => import("@/pages/comm/props/Parent.vue"),
  },
  {
    name: "emit",
    path: "emit",
    meta: {
      title: "emit自定义事件通信",
    },
    component: () => import("@/pages/comm/emit/Parent.vue"),
  },
  {
    name: "mitt",
    path: "mitt",
    meta: {
      title: "mitt任意通信",
    },
    component: () => import("@/pages/comm/mitt/Parent.vue"),
  },
  {
    name: "attrs",
    path: "attrs",
    meta: {
      title: "attrs透传通信",
    },
    component: () => import("@/pages/comm/attrs/Parent.vue"),
  },
  {
    name: "refs",
    path: "refs",
    meta: {
      title: "$refs和$parent通信",
    },
    component: () => import("@/pages/comm/refs/Parent.vue"),
  },
  {
    name: "model",
    path: "model",
    meta: {
      title: "v-model通信",
    },
    component: () => import("@/pages/comm/model/Parent.vue"),
  },
  {
    name: "provide",
    path: "provide",
    meta: {
      title: "provide和inject通信",
    },
    component: () => import("@/pages/comm/provide/Parent.vue"),
  },
  {
    name: "slot",
    path: "slot",
    meta: {
      title: "slot插槽通信",
    },
    component: () => import("@/pages/comm/slot/Parent.vue"),
  },
  {
    name: "unpopular",
    path: "unpopular",
    meta: {
      title: "不常用api的使用",
    },
    component: () => import("@/pages/Unpopular.vue"),
  },

]

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      redirect: "/main", // 重定向到home页面
    },
    {
      path: "/main",
      component: () => import("@/pages/Layout.vue"),
      redirect: "/main/home", // 重定向到home页面
      children: mainRoutes,
    },
    {
      path: "/other",
      component: () => import("@/pages/Other.vue"),
      redirect: "/other/props", // 重定向到props页面
      children: otherRoutes.concat(commRoutes),
    },
  ],
});

export default router;
